<template>
  <div class="w-screen h-screen flex items-center justify-center background"  :style="backgroundStyle">
    <div class="flex flex-col w-[500px] h-[300px] items-center p-5 gap-2 rounded border-2">
      <span class="font-bold text-lg">动物信息管理系统</span>
      <div class="w-full">
        <el-form
            label-position="top"
            label-width="auto"
            :model="User"
            class="max-w-[600px]"
        >
          <el-form-item label="账号">
            <el-input v-model="User.username" />
          </el-form-item>
          <el-form-item label="密码" type="password">
            <el-input v-model="User.password"  type="password"/>
          </el-form-item>
        </el-form>
        <el-button  class="w-full" type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive } from 'vue'
import router from "../router.ts";
import axios from "axios";
import {ElMessage} from "element-plus";

const User = reactive({
  username:'',
  password:'',

})
function login(){
  if(isNull()){
    console.log(User)
    axios.post('http://localhost:8080/user/doLogin', User)
        .then(response => {
        if(response.data.data.isLogin){
          console.log(response)
          // 保存 SA-Token 到 LocalStorage
          localStorage.setItem('sa-token', response.headers['sa-token']);
          localStorage.setItem('user', JSON.stringify(response.data.user));
          router.push("/index")
        }else {
          ElMessage({
            message:'账号密码错误',
            type:'error'
          })
        }
        })
        .catch(error => {
          ElMessage({
            message:'登录失败',
            type:'error'
          })
        });
  }else {
    ElMessage({
      message:'账号密码不能为空',
      type:'error'
    })

  }
}
function isNull(){
  if(User.username == '' || User.password == ''){
    return false
  }else {
    return true
  }
}

// 使用 import.meta.env.BASE_URL 引入背景图片
const backgroundStyle = {
    backgroundImage: `url(${import.meta.env.BASE_URL}background.jpg)`,
    backgroundSize: '2500px 1500px',  // 背景图片大小调整为填满容器
    backgroundPosition: 'center',  // 背景图片居中显示
};
</script>

